<!-- 新增/编辑指标 -->
<template>
  <a-drawer
    width="45%"
    :visible="props.visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title> {{ props.data?.id ? '编辑指标' : '新增指标' }} </template>
    <div>
      <a-form :model="formData.data" ref="refForm" :rules="rules">
        <a-form-item label="指标来源" field="source" show-colon>
          <a-select v-model="formData.data.source">
            <a-option :value="1">客户类</a-option>
            <a-option :value="2">财务类</a-option>
            <a-option :value="3">内部运营类</a-option>
            <a-option :value="4">学习与成长类</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="指标类型" field="type" show-colon>
          <a-select v-model="formData.data.type" @change="typeChange">
            <a-option :value="1">定性指标</a-option>
            <a-option :value="2">定量指标</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="指标名称" field="name" show-colon>
          <a-input v-model.trim="formData.data.name"></a-input>
        </a-form-item>
        <a-form-item label="指标定义" field="definition" show-colon>
          <a-textarea
            v-model="formData.data.definition"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="项目界定" field="define" show-colon>
          <a-textarea
            v-model="formData.data.define"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="指标极性" field="nature" show-colon>
          <a-select v-model="formData.data.nature">
            <a-option :value="1">越大越好</a-option>
            <a-option :value="2">越小越好</a-option>
          </a-select>
        </a-form-item>

        <a-form-item label="指标公式/说明" field="formula" show-colon>
          <a-textarea
            v-model="formData.data.formula"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="评价标准/规则" field="rule" show-colon>
          <a-textarea
            v-model.trim="formData.data.rule"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="评分上限" field="upper" show-colon>
          <a-tooltip
            content="注：加和计算评分规则下，每一项指标最高评分上限不得超过总分上限，
且各项指标得分和，要小于等于总分上限。
加权计算评分规则下，每一项指标的评分上限默认等于总分上限。"
          >
            <icon-info-circle-fill style="color: #165dff; font-size: 16px" />
          </a-tooltip>
          <a-input-number
            v-model="formData.data.upper"
            hide-button
            :disabled="
              toolStore.getCalculate === 2 && toolStore.geUpperLimit === 1
            "
          >
            <template #suffix>
              <div>分</div>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item
          label="指标权重"
          field="weight"
          show-colon
          v-if="toolStore.getCalculate === 2"
          :tooltip="`最大权重不能超过${
            100 -
            props.maxWeight +
            (props?.data?.weight ? props?.data?.weight : 0)
          }`"
        >
          <a-input-number
            v-model="formData.data.weight"
            hide-button
            :min="0.01"
            :precision="2"
            :max="
              100 -
              props.maxWeight +
              (props?.data?.weight ? props?.data?.weight : 0)
            "
          >
            <template #suffix>
              <div>%</div>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item
          label="考核目标"
          field="target"
          show-colon
          v-if="formData.data.type === 2"
        >
          <a-table
            style="width: 100%"
            :data="formData.data.target"
            :pagination="false"
          >
            <template #columns>
              <a-table-column title="基准值" data-index="reference">
                <template #title>
                  基准值
                  <a-checkbox v-model="isBase"></a-checkbox>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    :field="`target.${rowIndex}.reference`"
                    :rules="[
                      {
                        required: isBase ? true : false,
                        message: '请输入'
                      }
                    ]"
                  >
                    <a-input-number
                      v-model="record.reference"
                      :disabled="!isBase"
                      hide-button
                    ></a-input-number>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="目标值" data-index="">
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    :field="`target.${rowIndex}.goal`"
                    :rules="[
                      {
                        required: true,
                        message: '请输入'
                      }
                    ]"
                  >
                    <a-input-number
                      v-model="record.goal"
                      hide-button
                    ></a-input-number>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="挑战值" data-index="">
                <template #title>
                  挑战值
                  <a-checkbox v-model="isChallenge"></a-checkbox>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    :field="`target.${rowIndex}.challenge`"
                    :rules="[
                      {
                        required: isChallenge ? true : false,
                        message: '请输入'
                      }
                    ]"
                  >
                    <a-input-number
                      v-model="record.challenge"
                      :disabled="!isChallenge"
                      hide-button
                    ></a-input-number>
                  </a-form-item>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-form-item>
        <a-form-item
          label="考核目标单位"
          field="units"
          show-colon
          v-if="formData.data.type === 2"
        >
          <a-input
            v-model="formData.data.units"
            placeholder="请输入单位，比如%、元、万元"
          />
        </a-form-item>
        <a-form-item label="实际值录入" field="writeWay" show-colon>
          <a-tooltip
            content="`实际完成值用来记录考核周期内指标的实际完成情况。开启后，当前指标评分前需要先录入实际完成值。
①和考核目标进行对比，为评分人提供参考，[评分方式]需要设置为“直接输入”。
②用实际值设置公式，在录入实际值后自动算出指标评分，[评分方式]需要设置为“公式计算”。`"
          >
            <icon-info-circle-fill style="color: #165dff; font-size: 16px" />
          </a-tooltip>
          <a-switch />
          <a-radio-group v-model="formData.data.writeWay">
            <a-radio :value="1">由考核发起时指定</a-radio>
            <a-radio :value="2">直接指定录入人员</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="评分方式" field="markWay" show-colon>
          <a-radio-group v-model="formData.data.markWay">
            <a-radio :value="1">直接输入</a-radio>
            <a-radio :value="2">公式计算</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="计算公式"
          field=""
          show-colon
          v-if="formData.way === 2"
        >
          <a-button type="text" @click="countSettingVisiable = true"
            >设置</a-button
          >
        </a-form-item>
        <a-form-item label="评分人" field="personnel" show-colon>
          <!-- 系统自动评分 -->
          <a-tooltip
            content="注：评分人在平常的情况下，都是默认关闭，只有特殊指定的模板，才
开启，并且一直会指定某个指定的人员进行评分。
平常关闭状态下是以每个单独评价中”的设置定的评分人为准"
          >
            <icon-info-circle-fill style="color: #165dff; font-size: 16px" />
          </a-tooltip>
          <a-switch
            v-model="formData.data.personnel"
            :checked-value="1"
            :unchecked-value="2"
          ></a-switch>
        </a-form-item>
        <a-form-item label="备注" field="remark" show-colon>
          <a-textarea
            v-model="formData.data.remark"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="新增到指标库" field="" show-colon>
          <a-radio-group v-model="formData.isAddStore">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <!-- <CountSetting v-model:visible="countSettingVisiable"></CountSetting> -->
    </div>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button v-if="isShowContinueBtn" type="primary" @click="continueAdd"
          >确认并继续新增</a-button
        >
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import { useAssessmentToolStore } from '@/store';
import CountSetting from '../CountSetting/index.vue';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data?: any; // 传进来的数据,
    weight: number; // kpi权重
    maxWeight: number; // kpi所有子数据加起来的权重
  }>(),
  {}
);
const toolStore = useAssessmentToolStore();

const emits = defineEmits(['update:visible', 'kpiIndexEmit']);
let refForm = ref();
let countSettingVisiable = ref(false); // 是否设置计算公式弹出框
let isShowContinueBtn = ref(true); // 是否显示继续新增按钮
const formData = reactive<any>({
  data: {
    source: undefined, // 指标来源
    type: undefined, // 指标类型
    name: '', // 指标名称
    definition: '', // 指标定义
    define: '', // 项目界定
    nature: undefined, // 指标极性
    formula: '', // 指标公式/说明
    rule: '', // 评分标准/规则
    upper: undefined, // 评分上限
    weight: 0, // 指标权重
    target: [
      {
        reference: undefined, // 基准值
        goal: undefined, // 目标值
        challenge: undefined // 挑战值
      }
    ],
    personne: 2, // 评分人是否开启 1开 2否
    dataSource: undefined, // 数据来源，评分人
    // dimensionaId: undefined, // 纬度id
    units: '', // 考核目标单位
    writeWay: 1, // 实际值录入1关 2由考核发起时指定 3直接指定录入人员
    markWay: 1, // 评分方式 1 直接输入 2 公式计算
    remark: '', // 备注
    isAddStore: false // 是否新增到指标库
  }
});

// 原始数据
const originData = {
  source: undefined, // 指标来源
  type: undefined, // 指标类型
  name: '', // 指标名称
  definition: '', // 指标定义
  define: '', // 项目界定
  nature: undefined, // 指标极性
  formula: '', // 指标公式/说明
  rule: '', // 评分标准/规则
  upper: undefined, // 评分上限
  weight: 0, // 指标权重
  target: [
    {
      reference: undefined, // 基准值
      goal: undefined, // 目标值
      challenge: undefined // 挑战值
    }
  ],
  dataSource: undefined, // 数据来源，评分人
  // dimensionaId: undefined, // 纬度id
  units: '', // 考核目标单位
  writeWay: 1, // 实际值录入1关 2由考核发起时指定 3直接指定录入人员
  personne: 2, // 评分人是否开启 1开 2否
  markWay: 1, // 评分方式 1 直接输入 2 公式计算
  remark: '', // 备注
  isAddStore: false // 是否新增到指标库
};

// 校验权重
const validateWeight = (val: number, cb: any) => {
  if (props.maxWeight - (props?.data?.weight ? props?.data?.weight : 0) === 100)
    cb('权重总和已经达到100，若要继续新增该工具请先调整其他工具的权重!');
};

const rules = reactive({
  type: [
    {
      required: true,
      message: '请选择'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入'
    }
  ],
  rule: [
    {
      required: true,
      message: '请输入'
    }
  ],
  upper: [
    {
      required: true,
      message: '请输入'
    }
  ],
  weight: [
    {
      required: true,
      message: '请输入'
    },
    {
      validator: validateWeight
    }
  ]
});

// 是否选择了基准值或挑战值
let isBase = ref(false),
  isChallenge = ref(false);

watch(
  () => props.visible,
  (newVal: boolean) => {
    // 如果是编辑，则赋值给formData
    if (newVal) {
      if (props.data) {
        formData.data = cloneDeep(props.data);
        isShowContinueBtn.value = false;
      } else {
        formData.data = cloneDeep(originData);
      }

      // 如果设置了加权则要设置总分上限
      formData.data.upper =
        toolStore.getCalculate === 2 && toolStore.upperLimit === 1
          ? toolStore.getUpperScore * props.weight * 0.01
          : undefined;
    } else {
      isShowContinueBtn.value = true;
      formData.data = cloneDeep(originData);
    }
  }
);

const typeChange = (val: number) => {
  if (val === 2) {
    formData.data.target = [
      {
        reference: undefined, // 基准值
        goal: undefined, // 目标值
        challenge: undefined // 挑战值
      }
    ];
  }
};

// 加和计算tips表格数据
const sumData = [
  {
    name: '指标1',
    score: '评分1'
  },
  {
    name: '指标2',
    score: '评分2'
  },
  {
    name: '指标3',
    score: '评分3'
  }
];

// 加权计算tips表格数据
const weightData = [
  {
    name: '指标1',
    weight: '50%',
    score: '评分1'
  },
  {
    name: '指标2',
    weight: '30%',
    score: '评分2'
  },
  {
    name: '指标3',
    weight: '20%',
    score: '评分3'
  }
];

const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emits('kpiIndexEmit', cloneDeep(formData.data));
  emits('update:visible', false);
};

const continueAdd = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emits('kpiIndexEmit', cloneDeep(formData.data), true);
  emits('update:visible', true);
  formData.data = cloneDeep(originData);
  formData.data.upper =
    toolStore.getCalculate === 2 && toolStore.upperLimit === 1
      ? toolStore.getUpperScore * props.weight * 0.01
      : undefined;
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
